<template>
    <div class="page_Introduce">
        <van-nav-bar title="公司介绍"
            left-arrow
            @click-left="$router.push('/myCompany/companyHome')">
        </van-nav-bar>
        <van-field autocomplete="off"
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        placeholder="请输入公司介绍"
        />
        <van-uploader
          :after-read="uploadPhotoList"
          v-model="fileList"
          :max-count="9"
          :preview-options="{
            closeable: true,
          }"
          @delete="toDeleteAnyPreviewPhoto"
        />
        <van-button @click="upload()" round block :color="operateColor">{{operateText}}</van-button>
    </div>
</template>
<script>
import {Toast} from 'vant'
import {cosUploadImg} from '@/utils/cosUpload.js'

export default {
    data(){
        return{
            message:"",
            fileList: [
            ],
            hasPhotos:false,
            photos:"",
            photos_list_url: [],
            operateState:0 //操作的状态 默认为0上传
        }
    },
    async created() {
        const comMesRes = await this.$api.myCompany.reqGetCompanyMes()
        if (comMesRes.code === 200) {
          if(comMesRes.data.intro!=""){
              this.message=comMesRes.data.intro
              if(comMesRes.data.imgurl!=""){
                  let imgurlArr= comMesRes.data.imgurl.split(',')
                  imgurlArr.forEach((elem) => {
                      this.fileList.push({
                          url:elem
                      })
                  });
                  this.hasPhotos=true;
              }
              this.operateState=1
          }
        }
    },
    methods: {
        // 封装公共的上传图片函数
        async _reqUploadPicture(picture) {
        let formData = new FormData()
        formData.append('filename', picture.file)
        // 公司认证的图片
        const img_type = 'job_environment'
        // const res = await this.$api.uploadImg.uploadPhotos(formData, img_type)
        const res = await cosUploadImg(picture.file, img_type)
        if (res.code === 200) {
            return res.data
        }
        },
        // 上传图片
        uploadPhotoList(picture) {
            picture.status = 'uploading';
            picture.message = '上传中...';
            this._reqUploadPicture(picture).then(url => {
                if (!url) {
                    Toast('图片上传失败!')
                    picture.status = 'failed';
                    picture.message = '上传失败';
                } else {
                    picture.status = 'done';
                }

                // 不断的增加
                this.photos_list_url.push(url)
            })
        },
      toDeleteAnyPreviewPhoto(file, detail) {
        if (this.photos_list_url.length === 0) {
          this.photos_list_url = []
        } else {
          // splice方法会改变原始数组
          this.photos_list_url.splice(detail.index, 1)
        }
      },
        async upload(){
            if(this.message!=""){
                if(this.photos_list_url.length>1){
                    this.photos=this.photos_list_url.join(",")
                    }else{
                    this.photos=this.photos_list_url[0]
                }
                if(this.hasPhotos){
                    let newNum = this.photos_list_url.length
                    let newArr = []
                    for(let i=0;i<this.fileList.length-newNum;i++){
                        let name = "url"
                        newArr[i]=this.fileList[i][name]
                    }
                    for(let i=0;i<this.photos_list_url.length;i++){
                        newArr.push(this.photos_list_url[i])
                    }
                    this.photos=newArr.join(",")
                }
                const formData={
                    imgurl:this.photos,
                    intro:this.message
                }
                const res = await this.$api.myCompany.reqSaveCompanyMes(formData)
                if(res.code==200){
                    Toast.success(res.data);
                }
            }else{
                Toast.fail('公司介绍不能为空');
            }
        }
  },
  computed: {
    operateColor() {
        switch (this.operateState) {
            case 1:
            return '#36D7B7'
            default:
            return '#1989FA'
        }
    },
    operateText() {
        switch (this.operateState) {
            case 1:
            return '修改'
            default:
            return '上传'
        }
    },
  }
}
</script>
<style lang="less">
.page_Introduce{
    min-height: 100vh;
    background: #fff;
    .van-field{
        margin: 20px 0;
    }
    .van-uploader{
        padding: 0.26667rem 0.42667rem;
        .van-uploader__preview-image,.van-uploader__upload{
            width: 2.8rem;
            height: 2.8rem;
        }
    }
    .van-button{
        width: 50%;
        margin: 0 auto;
        margin-top: 30px;
    }
}
</style>
